<template>
  <u-card v-if="item" padding="20rpx 30rpx" margin="20rpx 30rpx" :border="false" class="item" :show-head="false">
    <template #body>
      <view class="item-body">
        <up-row gutter="0" customStyle="flex-wrap: wrap;">
          <up-col span="12">
            <view class="item-title">{{item.title}}</view>
          </up-col>
          <up-col span="6">
            <view class="flex">
              <view class="item-label">电话号码</view>
              <view class="item-value">{{item.mobile||'--'}}</view>
            </view>
          </up-col>
          <up-col span="6">
            <view class="flex">
              <view class="item-label">登录账号</view>
              <up-copy :disabled="!item.account" :content="item.account">
                <view class="flex">
                  <view class="item-value copy">{{ item.account||'--' }}</view>
                  <view v-if="item.account" class="text-primary">复制</view>
                </view>
              </up-copy>
            </view>
          </up-col>
          <up-col span="6">
            <view class="flex">
              <view class="item-label">门店余额</view>
              <view class="item-value">{{item.money}}元</view>
            </view>
          </up-col>
          <up-col span="6">
            <view class="flex">
              <view class="item-label">添加时间</view>
              <view class="item-value">{{dateFormat(item.addtime)}}</view>
            </view>
          </up-col>
        </up-row>
      </view>
      <view class="item-footer">
        <u-button type="primary" plain size="small" @click="handleClick(1)">进入门店</u-button>
        <u-button class="ml-[20rpx]" type="primary" size="small" @click="handleClick(12)">转移用户</u-button>
      </view>
    </template>
  </u-card>
</template>
<script lang="ts" setup>
import { debounce } from '@/utils/common';
import dayjs from 'dayjs';
import { computed, type PropType } from 'vue';

const props = defineProps({
  item: {
    type: Object as PropType<IStoreItem>,
  }
})

const emit = defineEmits(['transfer', 'change'])

// 格式化时间
const dateFormat = computed(() => {
  return (date: number) => dayjs(date*1000).format('YYYY-MM-DD HH:mm')
})


const handleClick = debounce((type: number) =>{
  if(type == 1) {
    emit('change')
  } else {
    emit('transfer')
  }
})
</script>

<style lang="scss" scoped>
.item-body {
  font-size: 24rpx;
  .item-title {
    font-size: 28rpx;
    font-weight: bold;
  }

  .item-label {
    padding-right: 10rpx;
    color: #999;
    white-space: nowrap;
  }

  .item-value {
    color: #000;
    white-space: nowrap;
    flex: 1;
    overflow: hidden;
    
    &.copy {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 10rpx;
    }

  }
  .text-primary {
    white-space: nowrap;
    width: 40rpx;
  }
  
}

.item-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1px solid #eee;
  margin-top: 10rpx;
}
</style>